<!--
 * @Description:  长线视频播放页 -- course_play_cc2
 * @Author: your name
 * @Date: 2024-02-19
 * @LastEditTime: 2024-02-19
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="nav_return">
      <div class="heart_w wrapper">
        <div class="goback">
          <el-button
            type="text"
            icon="iconfont icon-fanhui"
            @click="course_play"
          >
            1 - 条件结构
          </el-button>
        </div>
        <div class="video_title">
          <!-- <div class="cong phonehidden">
            <p class="mulu_P">
              <img
                src="@/assets/images/icon_bofang.png"
                alt=""
                class="icon_upload"
                style="vertical-align: inherit"
              />
              播放线路
            </p>
            <div
              class="download_zl distance01"
              id="Play_line"
              style="position: absolute; display: none"
            >
              <ul>
                <li>
                  <p>
                    <a href="/combo/combo/course_play_al/couid/29365">
                      播放线路1
                    </a>
                  </p>
                </li>
                <li>
                  <p>
                    <a
                      href="/combo/combo/course_play_cc2/couid/29365"
                      rel="nofollow"
                    >
                      播放线路2
                    </a>
                  </p>
                </li>
              </ul>
            </div>
          </div> -->
          <div class="cong phonehidden">
            <p class="mulu_P">
              <img
                src="@/assets/images/icon_ziliao.png"
                alt=""
                class="icon_upload"
              />
              配套资料下载
            </p>

            <div
              class="download_zl distance"
              id="Play_line"
              style="position: absolute; display: none"
            >
              <h6>配套资料下载</h6>
              <ul>
                <li>
                  <p>
                    <a
                      href="https://img.rongyuejiaoyu.com/uploads/20230103/c0a19cdd8d88700060709387062ab7a7.pdf"
                      target="_blank"
                    >
                      Python精品体验课讲义
                    </a>
                  </p>
                </li>
              </ul>
            </div>
          </div>
          <div class="cong phonehidden">
            <p class="mulu_P">
              <img
                src="@/assets/images/icon_muluu.png"
                alt=""
                class="icon_upload"
              />
              目录
            </p>

            <div
              class="download_zl distance03"
              id="Play_line"
              style="position: absolute; display: none"
            >
              <div class="jiege">
                <!-- <h6 style="cursor: pointer">基础课程{{ index + 1 }}</h6> -->
                <ul>
                  <!-- <li class="mulu_title">(1) 、 第一章 介绍 (共8个视频)</li> -->
                  <li
                    v-for="(item_t, index) in catalogueVideo"
                    :key="item_t.id"
                    class="mulu_href"
                    style="cursor: pointer; display: list-item"
                  >
                    <a href="/combo/combo/course_play/couid/29363">
                      ({{ index + 1 }}) 、{{ item_t.title }}
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div
          id="videoBox"
          :class="{ videocontent: !isquan, allvideo: isquan }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
function onCCH5PlayerLoaded() {
  window.ccH5PlayerJsLoaded = true
}
</script>
<script src="https://p.bokecc.com/player?siteid=F2DE604AF16F674F&newversion=true"></script>
<script>
import { getCourseList, getFileList, getCourseInfo } from '@/api/lineCourseList'
export default {
  name: 'course_play_cc2',
  data() {
    return {
      isquan: true, //视频全屏
      idx: 0,
      last_time: 0,
      videoId: 1,
      catalogueVideo: [],
      list: ['A4AC816AE19AAF8A3F35109F9F77F2A8']
      // list: [
      //   'C56ED7D0C11A8288753C612EB38A8D5A',
      //   'A392C8BAB92053507E6C9CEE8B422289',
      //   'A392C8BAB92053500498CE5AAF1F53F5'
      // ] //视频播放器
    }
  },
  created() {
    console.log(this.$route.query.Id)
    this.videoId = this.$route.query.Id
    if (window.ccH5PlayerJsLoaded) {
      this.createPlayer()
    }
    this.setPlayerCallBack()
    this.getVideoList()
    this.getCourseInfoL()
  },
  mounted() {
    this.createPlayer()
  },
  methods: {
    getVideoList() {
      getCourseList({ id: this.videoId }).then(({ data: data }) => {
        this.catalogueVideo = data.data
      })
    },
    getCourseInfoL() {
      getCourseInfo({ id: this.videoId }).then(({ data: data }) => {
        console.log(data.data)
      })
    },
    course_play() {
      this.$router.back()
    },
    // 播放器相关方法
    createPlayer() {
      this.test = document.getElementById('videoBox')
      if (this.idx >= this.list.length) this.idx = 0
      console.log(this.idx, 'createPlayer前')
      this.player = window.createCCH5Player({
        vid: this.list[this.idx],
        siteid: '677D7D6D589120DA',
        autoStart: true,
        width: '100%',
        height: '100%',
        closeHistoryTime: 0,
        preventKeyboardEvent: false,
        parentNode: this.test
      })
      // this.PlayerLoaded = true
      // this.idx++;
      // console.log(this.PlayerLoaded, 'createPlayer后', this.last_time)
    },
    // 下一个
    nextPlayer() {
      this.player && this.player.destroy()
      this.createPlayer()
    },
    destroyed() {
      this.player && this.player.destroy()
    },
    setPlayerCallBack() {
      window.onCCH5PlayerLoaded = this.onCCH5PlayerLoaded
      window.on_CCH5player_ready = this.onPlayerReady
      window.on_player_volumechange = this.onPlayerVolumeChange
    },
    onCCH5PlayerLoaded() {
      window.ccH5PlayerJsLoaded = true
      this.createPlayer()
    },
    onPlayerReady(obj) {
      console.log('CCH5player_ready', obj)
      window.cc_js_Player.setVolume(0.3)
    },
    onPlayerVolumeChange(volume, vid) {
      console.log('设置音量回调:  ', volume, vid)
    }
  }
}
</script>

<style scoped lang="scss">
@mixin ul_li {
  ul {
    list-style: none;
    li {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #e6e6e6;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.allvideo {
  width: -webkit-calc(100% - 1px);
  width: -moz-calc(100% - 1px);
  width: calc(100% - 1px);
  height: 652px;
}
.videocontent {
  width: -webkit-calc(100% - 321px);
  width: -moz-calc(100% - 321px);
  width: calc(100% - 321px);
  height: 652px;
}

.nav_return {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
}

.video_title {
  display: flex;
  align-items: center;

  .phonehidden:hover {
    #Play_line {
      display: block !important;
    }
  }

  .cong {
    position: relative;
    .mulu_P {
      cursor: pointer;
      user-select: none;
      margin-right: 6px;
      img {
        margin: 0 8px;
        vertical-align: middle;
      }
    }

    .download_zl {
      background-color: #fff;
      top: 60px;
      right: 0;
      display: none;
      z-index: 1111;
      box-sizing: border-box;
      box-shadow: 3px 3px 20px #cccccc75;
      max-height: 600px;
      overflow-y: scroll;
    }
    #Play_line ul li:hover {
      background-color: #bd0000;
      color: #fff;
    }

    .distance03 {
      width: 500px;
      padding: 10px;

      .jiege {
        h6 {
          cursor: pointer;
          font-size: 16px;
          height: 40px;
          line-height: 40px;
          border-bottom: 1px solid #e6e6e6;
          cursor: pointer;
          font-weight: bold;
        }

        @include ul_li();

        ul {
          .mulu_title {
            cursor: pointer;
          }
        }
      }
    }
    .distance01 {
      width: 145px;
      height: 220px;
      text-align: center;
      padding: 0;
    }

    .distance {
      width: 360px;
      text-align: left;
      padding: 8px 15px 8px 8px;

      h6 {
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e6e6e6;
        cursor: pointer;
        font-weight: bold;
      }

      @include ul_li();
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .goback {
    .el-button {
      color: #333;
      ::v-deep .iconfont {
        vertical-align: middle;
        font-size: 18px;
        font-weight: 600;
      }

      ::v-deep span {
        vertical-align: middle;
      }
    }
  }
}
</style>
